<template>
	<view>
		<view class="header_nav">
			<view class="status_bar" :style="{height:recHeight+'px'}"></view><!-- 状态栏 -->
			<view class="header_title" :style="{height:titleBarHeight+'px',top:recHeight+'px',lineHeight:titleBarHeight+'px'}">
				<view class="_black _font-18 _w-max _pos-rel _flex-row-center-mid">
					<navigator open-type="navigateBack" class="_font-18 _pos-abs-left _pad-x-15 iconfont icon-zuo"></navigator>{{title}}
				</view>
			</view>
		</view>
		<image class="_w-max" style="z-index: -1;" src="https://uxcar.uxphp.net/uploads/attach/2023/07/20230728/9ac2891c6958bf20ecc8a99366f1dbfe.png" mode="widthFix"></image>
		<view style="position: absolute;width: 100%;margin-top: -440rpx;">
			<view style="margin-left: 30rpx;font-size: 30rpx;font-weight: bold;">请填写以下信息</view>
			<view style="margin-top: 20rpx;margin-left: 30rpx;font-size: 22rpx;">稍后会有客服人员与您进行沟通</view>
		</view>
		<view class="_pad-x-10 _pos-rel _z-index-1" style="margin-top: -280rpx;">
			<view class="_white-bg" style="border-radius: 10rpx;">
				<view class="_pad-15 _flex-row-bet-mid _border-bottom">
					<view class="_font-15" style="width: 180rpx;">姓名</view>
					<input class="_flex-1" v-model="contact_name" placeholder="请输入姓名"/>
				</view>
				<view class="_pad-15 _flex-row-bet-mid _border-bottom">
					<view class="_font-15" style="width: 180rpx;">电话</view>
					<input class="_flex-1" v-model="contact_mobile" placeholder="请输入电话"/>
				</view>
				<view class="_pad-15 _flex-row-bet-mid _border-bottom">
					<view class="_font-15" style="width: 180rpx;">用车时间</view>
					<picker class="_flex-1 _font-14" mode="date" @change="selectBookTime">
						<view class="uni-input _w-max" :class="book_time ? '' : '_grey-99'" style="text-align: left;">{{book_time||'请选择用车时间'}}
							<text class="iconfont icon-you" style="font-weight: 600;color: #999999;float: right;"></text>
						</view>
					</picker>
				</view>
				<view class="_pad-15 _flex-row-bet-mid _border-bottom">
					<view class="_font-15" style="width: 180rpx;">车辆类型</view>
					<picker class="_flex-1 _font-14" mode="selector" :value="car_type_index" :range="car_book_type" range-key="title" @change="selectCarBookType">
						<view class="uni-input _w-max" :class="car_type_name ? '' : '_grey-99'" style="text-align: left;">{{car_type_name||'请选择车辆类型'}}
							<text class="iconfont icon-you _grey-99" style="font-weight: 600;float: right;"></text>
						</view>
					</picker>
				</view>
				<view class="_pad-15 _flex-row-bet-mid">
					<view class="_font-15" style="width: 180rpx;">预约备注</view>
					<view class="_flex-1" style="background-color: #f8f8f9;border-radius: 10rpx;">
						<view style="margin: 18rpx 18rpx 18rpx 18rpx;">
							<textarea style="height: 128rpx;width: 100%;" v-model="remark" placeholder="请输入预约备注" placeholder-style="color:#999999;"></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="_pad-x-15 _pad-y-30 _white-bg _w-max _pos-fixed _bottom _left _z-index-1">
			<view class="_w-max _pad-y-10 _text-center theme-color-bg" style="border-radius: 20rpx;" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import { carBookType, carBookSubmit } from '@/api/car.js';
	export default {
		data() {
			return {
				recHeight: '',//状态栏高度
				titleBarHeight:'', //顶部标题栏高度
				MenuButtonHeight: '', //小胶囊高度
				MenuButtonTop: '',//顶部距离
				headerHeight:'',//头部总高度
				
				type_id: 1,
				car_type_id: 0,
				car_type_name: '',
				contact_name: '',
				contact_mobile: '',
				book_time: '',
				remark: '',
				car_book_type: [],
				car_type_index: 0,
				title: '',
			}
		},
		onLoad(op){
			this.MenuButtonHeight = uni.getMenuButtonBoundingClientRect().height;//小胶囊高度
			this.MenuButtonTop = uni.getMenuButtonBoundingClientRect().top;//顶部距离
			this.getPhoneInfo();
			this.type_id = op.type_id;
			this.carBookType();
			if(this.type_id==1){
				this.title = '婚庆用车';
			}else if(this.type_id==2){
				this.title = '短途接送';
			}else{
				this.title = '企业租车';
			}
		},
		methods: {
			// 顶部导航栏 配置
			getPhoneInfo() {
				let that = this;
				uni.getSystemInfo({
					success(res){
						that.recHeight = res.statusBarHeight;//获取状态栏高度
						that.titleBarHeight = (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
						that.headerHeight = (res.statusBarHeight) + (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
					}
				})
				const query = uni.createSelectorQuery().in(that);
				    query.select('.shops_search').boundingClientRect(data => {
				}).exec();
			},
			// 提交订单
			submit(){
				let that = this;
				let param = {
					type_id: that.type_id,
					car_type_id: that.car_type_id,
					car_type_name: that.car_type_name,
					contact_name: that.contact_name,
					contact_mobile: that.contact_mobile,
					book_time: that.book_time,
					remark: that.remark
				}
				uni.showModal({
					title: '提示',
					content:'请确认信息无误后点击确认',
					success(res) {
						if(res.confirm){
							uni.showLoading({title:'提交中...'})
							carBookSubmit(param).then((res)=>{
								uni.hideLoading();
								uni.showModal({
									title: '提示',
									content: '提交成功，届时将会有工作人员联系您，请保持电话通畅',
									success(res) {
										if(res.confirm){
											uni.navigateBack();
										}else{
											uni.navigateBack();
										}
									}
								})
							}).catch((err)=>{
								uni.hideLoading();
								uni.showToast({title:err,icon:'none'})
							})
						}
					}
				})
			},
			// 选择用车时间
			selectBookTime(row){
				this.book_time = row.detail.value;
			},
			// 选择车辆类型
			selectCarBookType(row){
				let index = row.detail.value;
				this.car_type_index = index;
				this.car_type_id = this.car_book_type[index].id;
				this.car_type_name = this.car_book_type[index].title;
			},
			// 车辆类型
			carBookType(){
				let that = this;
				let param = {
					type_id: that.type_id
				}
				carBookType(param).then((res)=>{
					that.car_book_type = res.data;
				}).catch((err)=>{
					uni.showToast({title:err.msg,icon: 'none'})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.header_nav {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		.status_bar {
			width: 100%;
			position: fixed;
			z-index: 9;
		}
		.header_title {
			width: 100%; 
			position: relative;
			z-index: 999;
		}
	}
</style>
